<template>
    <div>
        <h3>{{ msg }}</h3>
        <h2>学生管理系统</h2>
        <table>
            <tr>
                <th>No</th>
                <th>Id</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Chinese</th>
                <th>Math</th>
                <th>English</th>
                <th>Admin</th>
            </tr>
            <tr id="" v-for="(s, index) in stu" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ s.id }}</td>
                <td>{{ s.name }}</td>
                <td>{{ s.gender }}</td>
                <td>{{ s.chinese }}</td>
                <td>{{ s.english }}</td>
                <td>{{ s.math }}</td>
                <td>
                    <router-link to="/insert" active-class="active">Insert</router-link>
                    <router-link :to="'/edit/'+s.id" active-class="active">Edit</router-link>
                    <a href @click="del_stu_info(s.id)" active-class="active">del</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
  name: 'StudentInfo',
  data () {
    return {
      msg: 'welcome to student mangement system'
    }
  },
  computed: {
    stu: function () {
      let len = localStorage.length
      let stuinfo
      let stu = []
      for (let i = 0; i < len; i++) {
        let stukey = localStorage.key(i)
        if (stukey.substr(0, 3) === 'stu') {
          stuinfo = JSON.parse(localStorage.getItem(localStorage.key(i)))
          stu.push(stuinfo)
        }
      }
      return stu
    }
  },
  methods: {
    del_stu_info: function (stuid) {
      localStorage.removeItem('stu' + stuid)
    }
  }
}
</script>
